<template>
  <!-- 0 属性列表页面   1 参数列表页面 -->
  <!-- 其实就是同一个页面  只不过展示的数据不一样 -->

  <div class="attribute-list">
    <!-- 数据列表   添加按钮 -->
    <div class="add-box">
      <div class="icon">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button type="primary" @click="toAddProductAttr">添加</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="id" label="编号" width="100" />
        <el-table-column align="center" prop="name" label="属性名称" />
        <el-table-column align="center" label="商品类型">
          <template #default>
            {{ queryParams.cname }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="属性是否可选">
          <template #default="{ row }">
            {{ row.selectType === 0 ? '唯一' : (row.selectType === 1 ? '单选' : '多选') }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="属性值的录入方式">
          <template #default="{ row }">
            {{ row.inputType === 0 ? '手工录入' : '从列表中选取' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="inputList" label="可选值列表" />
        <el-table-column align="center" prop="sort" label="排序" />
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button @click="toUpdateProductAttr">编辑</el-button>
            <el-button type='danger' @click="deleteProductAttribute(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 批量操作 ---- 分页器 -->
    <div class="table-bottom">
      <!-- 左边 批量操作 -->
      <div class="left">
        <el-select v-model="currentOperation" placeholder="批量操作">
          <el-option label="删除" value="delete" />
        </el-select>
        <el-button type='primary' @click="toSureOperation">确定</el-button>
      </div>
      <!-- 右边 分页器 -->
      <div class="right">
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
          :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
          :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import * as http from '@/request/http';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';

// query 路由参数 类型约束
interface queryParamsModel {
  cid?: number;
  cname?: string;
  type?: number;
}

// 表格数据
const tableData = ref<IAttributeListModel[]>([]);

// 批量操作 选择器  的 绑定值
const currentOperation = ref('');

// 分页器相关参数
const paginationParams = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 30,
});

// 获取当前路由对象
const route = useRoute();
// 获取路由query参数   这里的queryParams包含三个属性 分别是 cid,cname,type
const queryParams: queryParamsModel = route.query;
// console.log('当前路由对象携带的参数 :', queryParams);


const getAttrListByType = () => {
  // 发送请求  获取表格数据( type: 0属性列表  1参数列表)
  http.attribute.getAttrListByType({
    pageNum: paginationParams.currentPage,
    pageSize: paginationParams.pageSize,
    cid: queryParams.cid as number,  // as 断言
    type: queryParams.type!  // 或者 ! 非空断言
  }).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.list;  // 表格数据
      paginationParams.total = res.data.total;  // 分页器总数
    }
  });
};
getAttrListByType();


// 当前勾选的商品对象所组成的 数组
const multipleSelection = ref<number[]>([]);

// 点击表格第一列的 全选 或者  多选框   触发该方法 拿到当前勾选的商品对象所组成的 数组 val
const handleSelectionChange = (val: IAttributeListModel[]) => {
  // 处理勾选的内容  我们只需要拿到 当前勾选的商品的id 组成的数组
  const checkedIds: number[] = val.map(item => {
    return item.id
  });
  multipleSelection.value = checkedIds;
  // console.log('勾选的商品id数组1 :', checkedIds);
  // console.log('勾选的商品id数组2 :', multipleSelection.value);
}

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
  paginationParams.pageSize = val;
  // 重新请求    更新数据
  getAttrListByType();
};

// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
  paginationParams.currentPage = val;
  // 重新请求  更新数据
  getAttrListByType();
};

// 点击 "添加按钮" 跳转到 添加商品属性页面
const toAddProductAttr = () => {
  router.push(`/pms/addProductAttr`);
}

// 点击 "编辑按钮" 跳转到  编辑商品属性页面
const toUpdateProductAttr = () => {
  router.push(`/pms/updateProductAttr`);
}

// 抽离 批量删除  请求方法
const deleteProductAttribute = (ids: number[]) => {
  // 删除 操作 还是要严谨一点  让用户进行二次确认
  ElMessageBox.confirm(
    `是否要进行删除操作 ?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.attribute.deleteProductAttribute(ids).then(res => {
      if (res.code === 200) {
        // 删除成功 重新请求 表格数据
        getAttrListByType();
        // 提醒用户 删除成功
        ElMessage.success(`删除成功`);
      }
    })
  }).catch(() => {
    ElMessage.warning('取消删除');
  })
}

// 点击 批量操作 的 确认键
const toSureOperation = () => {
  // 当前勾选的不为空
  if (multipleSelection.value.length !== 0) {
    // 当前批量操作 为 删除
    if (currentOperation.value === '') {
      // 用户还未选择任何批量操作  提醒用户选择
      ElMessage.warning('请先选择批量操作的类型');
    } else if (currentOperation.value === 'delete') {
      // 调用方法 发送请求 进行  批量删除
      deleteProductAttribute(multipleSelection.value);
    }
  } else {
    // 当前未勾选任何属性  提醒用户先勾选
    ElMessage.warning('请先勾选需要批量操作的属性');
  }
}


</script>

<style scoped lang="less">
.attribute-list {

  // 添加 按钮
  .add-box {
    padding: 20px;
    margin: 20px 0;
    // border: 1px solid #ebeef5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }
  }

  // 批量操作   分页器
  .table-bottom {
    display: flex;
    justify-content: space-between;

    // 左边 批量操作
    .left {
      display: flex;
      align-items: center;

      .el-button {
        margin-left: 20px;
      }
    }

    // 右边 分页器
    .right {
      display: flex;
      flex-direction: row-reverse;
      margin: 20px 0;
    }
  }
}
</style>